<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>盒子模型</title>

        <style>
            .outerDiv{
                width: 500px;
                height: 300px;
                background-color: antiquewhite;
                color: rgb(230, 73, 16);
                font-weight: bold;
                font-size: 25px;
                font-family: serif;
                border: 1px solid black;
                margin: 0px auto;
            }

            .innerDiv{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                float: left;
            }

            /* 
                容量
                    width 宽度
                    height 高度
                边线
                    border 边线不会占据容量的位置 他会紧贴在容量外面画边线
                边距
                    外边距 margin 与边线外部的距离
                        margin 后面可以跟 1 / 2 / 4 个值 分别为
                            1. 全部边
                            2. 上下边 左右边
                            3. 上 右 下 左 顺时针方向设置
                        也可以通过 margin-xxx来设定某个方向的边距
                    内边距 padding 与边线内部的距离 默认情况下也是不会占据容量的 它会把边线向外推一部分来满足内边距
                        设置方式同外边距

            */
            .div1{
                background-color: rgb(77, 148, 148);
                margin-top: 10px;
                margin-left: 10px;
                margin-right: 10px;
                margin-bottom: 10px;
            }
            .div2{
                background-color: rgb(127, 88, 163);
                padding-left: 10px;
                padding-right: 10px;
                padding-top: 10px;
                padding-bottom: 10px;
            }
            .div3{
                background-color: rgb(137, 75, 75);
                margin-left: 10px;
            }
        </style>
    </head>
    <body>
        <div class="outerDiv">
            <div class="innerDiv div1">div1</div>
            <div class="innerDiv div2">div2</div>
            <div class="innerDiv div3">div3</div>
        </div>
    </body>
</html>
